<template>
    <div id="box" v-if="allData">
           <tabbar></tabbar>
           <swiper>
                <!-- 轮播图 -->
                <div class="swiper-slide" v-for="item in allData.banner" :key="item._id">
                   <img :src="item.url" alt="">
                </div>
            </swiper>
            <!-- 中间展示页面 -->
            <center :data="this.allData.data"/>
            <end></end>
    </div>
</template>

<script>

import tabbar from '@/components/Tabbar'
import swiper from '@/components/Swiper'
import center from '@/views/Index/Main'
import end from '@/components/Footer'
import {getAdvertisement,getMixData} from '../api/Index';

export default {
    data(){
        return {
            allData:{banner:[],data:[]}
        }
    },
    components:{
        tabbar,
        swiper,
        center,
        end
    },
    mounted(){
        getAdvertisement().then(res=>{
            // console.log(res);
            this.allData.banner=res.data
        }) 
        getMixData().then(res=>{
            this.allData.data = res.data
            // console.log(this.allData);
        })
        
    }
}
</script>
<style lang="scss" scoped>
    #box{
        .swiper-slide{
            // width: 100%;
            // width: 1200px;
            height: 500px;
            overflow: hidden;
            img{
                // width: 1200px;
                width: 100%;
                height: 750px;
                display: block;
                margin: auto;
            }
        }
    }
</style>